<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INSTITUTION.CODE' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="insCode" name="insCode" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('insCode'), name:'insCode'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INSTITUTION.NAME' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="insName" name="insName" nz-input/>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('insName'), name:'insName'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INSTITUTION.NAME_EN' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="insNameEN" name="insNameEN" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('insNameEN'), name:'insNameEN'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.COUNTRY_REGION' | i18n}}</nz-form-label>
          <nz-form-control>
            <app-country-select
              formControlName="nation"
              type="string"
            ></app-country-select>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('nation'), name:'nation'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'BIZ.ACQUIRER.BIZ_AREA' | i18n}}</nz-form-label>
          <nz-form-control>
            <nz-select
              formControlName="businessArea"
              name="businessArea"
              [nzAllowClear]="true"
            >
              <nz-option
                *ngFor="let item of bizAreaOptions"
                [nzLabel]="item.label"
                [nzValue]="item.value"
              ></nz-option>
            </nz-select>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('businessArea'), name:'businessArea'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.TRANSACTION_CURRENCY' | i18n}}</nz-form-label>
          <nz-form-control>
            <app-currency-select
              formControlName="currencies"
              [multiple]="true"
            ></app-currency-select>
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('currencies'), name:'currencies'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="24">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.ADDRESS' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="address" name="address" nz-input placeholder="">
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('address'), name:'address'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.CONTACT_NAME' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="contactName" name="contactName" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('contactName'), name:'contactName'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.EMAIL' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input formControlName="contactEmail" name="contactEmail" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('contactEmail'), name:'contactEmail'}"></ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('isNumTaken'); else fifth">{{ errorTips[name]?.isNumTaken }}</ng-container>
    </ng-template>
    <ng-template #fifth>
      <ng-container *ngIf="control.hasError('pattern')">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>
